<template>
  <AddEditNote
    :isEditPage="true"
    bgColor="link"
    v-model="note"
    placeholder="请输入新的事项内容..."
  >
    <button
      class="button is-link mr-3"
      @click="handleCancelClick"
    >
      取消
    </button>
    <button
      class="button is-link is-light"
      @click="handleSaveClick"
    >
      保存
    </button>
  </AddEditNote>
</template>

<script setup>
  import { ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import AddEditNote from '@/components/Notes/AddEditNote.vue'
  import { useNodesStore } from '@/store/notesStore.js'

  defineProps({
    value: {
      type: String
    },
    bgColor: {
      type: String,
      default: 'success'
    },
    isEditPage: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入事项...'
    }
  })

  const notesStore = useNodesStore()
  const { contentById, saveNote } = notesStore

  const route = useRoute()
  const router = useRouter()

  const note = ref(contentById(route.params.id))

  const handleSaveClick = () => {
    saveNote({
      id: route.params.id,
      note: note.value
    })
    router.back()
  }

  const handleCancelClick = () => {
    router.back()
  }

  // export default {
  //   props: {
  //     value: {
  //       type: String
  //     },
  //     bgColor: {
  //       type: String,
  //       default: 'success'
  //     },
  //     isEditPage: {
  //       type: Boolean,
  //       default: false
  //     },
  //     placeholder: {
  //       type: String,
  //       default: '请输入事项...'
  //     }
  //   },

  //   data() {
  //     return {
  //       stop: ''
  //     }
  //   },

  //   methods: {
  //     handleInput(e) {
  //       const val = e.target.value
  //       this.$emit('input', val)
  //     }
  //   },

  //   watch: {
  //     value(newValue) {
  //       if (newValue.length >= 100) {
  //         // 修复都一个字符的 bug
  //         this.$emit('input', newValue.slice(0, newValue.length - 1))
  //         alert('输入的字数不能超过 100。')
  //       }
  //     }
  //   }
  // }
</script>

<style scoped>

</style>